<template>
	<!--
		1、操作签到后，签到的状态不可再编辑修改，课次结束后，计算扣减课时数；
		2、操作迟到、旷课的状态不可再编辑修改，根据发布课程时，设定的“请、迟、旷”的限定来判定是否扣件课时数；
		3、请假的状态是可以修改的，课修改为补课，修改完补课状态后，核算扣减课时。
	-->
	
	<div class="studentAttendanceContainer">
		<div class="content2">
			<!--模块名称-->
			<!-- <el-row>
				<div class="modelname">考勤管理</div>
			</el-row>	 -->
		    <!--搜索框-->
		    <el-row>
		   	    <el-col :span="18">	 
		   	    	<div class="search-box">
		   	    		 <el-select style="width:2.03rem;float: left;" @change="changeClass" filterable clearable  v-model="classnametext"  placeholder="全部班级">
							    	<template v-for="item in classlist">
							    		<el-option :label="item.name" :key="item.value" :value="item.value"></el-option>
							    	</template>			      
						</el-select>
						<el-select style="width:2.03rem;float: left;margin-left: .1rem;" @change="changeAttendState" clearable  v-model="selectState"  placeholder="考勤状态">
							    	<template v-for="item in attendenceState">
							    		<el-option :label="item.name" :key="item.value" :value="item.value"></el-option>
							    	</template>			      
						</el-select>
	
						<el-input style="width:3.5rem;float: left;margin-left: .1rem;" @keyup.enter.native="searchData(1)" placeholder="学员姓名\班级名称\学号" v-model="searchText" class="input-with-select">
							    	<!--<div class="prefixiconsearch" @click="searchData(1)" slot="suffix"></div>    -->
			            </el-input>	 
			            <div class="search_btn" @click="searchData(1)" v-if="hasApi('getAttendenceList')" style="float: left;margin-left:0.1rem;">搜索</div>
			            <div @click="addAttendence" class="btnClass" v-if="hasApi('addAttendence')">新增考勤记录</div>
		   	    	</div>			   	  
	            </el-col>
	            <el-col :span="6">   

	            	<el-date-picker      
						class="headDatePicker"           		
						v-model="headControls.timeselect.selfTime" 
						@change="updateSelfTime"
						type="datetimerange"		
						ref="selfTime"				
						value-format="yyyy-MM-dd HH:mm:ss"
						range-separator="至"
						start-placeholder="开始日期" 
						end-placeholder="结束日期"
						:default-time="['00:00:00', '23:59:59']"
						>
					</el-date-picker>
					<div class="timeselect">
						<div class="datetime"  @click="timeselectchange(1)">
							<span>今日</span>
						</div>
						<div class="datetime" @click="timeselectchange(2)">
							<span>本周</span>
						</div>
						<div class="datetime" @click="timeselectchange(3)">
							<span>本月</span>
						</div>
						<div class="datetime" @click="timeselectchange(4)">
							<span>自定义</span>
						</div>
					</div>
	            	<!--<el-radio-group class="timeselect" v-model="headControls.timeselect.radio"   @change="timeselectchange">
						<el-radio-button style="color: red;" label="今日"></el-radio-button>
						<el-radio-button label="本周"></el-radio-button>
						<el-radio-button label="本月"></el-radio-button>
						<el-radio-button label="自定义" ref="selfBtn"></el-radio-button>
					</el-radio-group>-->
	            </el-col>
		   </el-row>
		    <!--考勤列表-->
		    <el-row style="margin-top:.2rem;margin-bottom: .2rem;">
		   	   <div class="attenceList">
		   	   	<div class="pageList">		   	   		
				   	   	<template>
							    <el-table						    							    
							      :data="attendenceList"
							      stripe
							      style="width: 100%">
							      <el-table-column
							      	align="center"
							        prop="realName"
							        label="姓名"
							        >
							      </el-table-column>
							      <el-table-column
							      	align="center"
							        prop="courseName"
							        label="报名课程"
							       >
							       </el-table-column>
							       <el-table-column
							      	align="center"
							        prop="className"
							        label="班级名称"
							       >
							      </el-table-column>						    
							      <el-table-column
							      	align="center"
							        prop="teacherUserName"
							        label="教师">
							      </el-table-column>
							      <el-table-column
							      	align="center"
							        width="220"
							        label="上课时间">
							       <template slot-scope="scope">
									   <div v-if="scope.row.courseType!==2">
										   	<span>{{scope.row.courseName}}</span>&nbsp;
											<span>第{{scope.row.orderBy}}次课</span><br>
											<span>{{scope.row.startTime?scope.row.startTime.split(' ')[0]:'-'}}</span>&nbsp;
											<span>{{scope.row.startTime?scope.row.startTime.split(' ')[1]:scope.row.startTime}}
												-{{scope.row.endTime?scope.row.endTime.split(' ')[1]:'-'}}</span>
									   </div>
									   <span v-else>
										   	<!-- <span>{{scope.row.courseName}}</span><br> -->
											<span>{{scope.row.startTime?scope.row.startTime.split(' ')[0]:'-'}}</span>&nbsp;
											<!-- <span>{{scope.row.startTime.split(' ')[1]}}-{{scope.row.endTime.split(' ')[1]}}</span> -->
									   </span>
							       
							       </template>
							      </el-table-column>
							      <el-table-column
							      	align="center"
							        label="学员状态">
							        <template slot-scope="scope">
										<span>{{scope.row.courseStatusName}}</span>
							        </template>
							      </el-table-column>
							      <el-table-column
							      	align="center"
							        label="考勤状态">
							        <template slot-scope="scope">
										<span>{{scope.row.signinModeName}}</span>
							        </template>
							      </el-table-column>
							      
							      <el-table-column
							      	align="center"
							        prop="consumeHour"
							        label="消课">
							      </el-table-column>
							      <el-table-column
							      	align="center"
							        prop="siginUserName"
							        label="签到人">
							      </el-table-column>
								   <el-table-column
							      	align="center"
							        prop="teacherEvaluateTime"
							        label="老师评价">
									<template slot-scope="scope">
							        	<span>{{scope.row.teacherEvaluateTime||'未评价'}}</span>				           
							    	</template>
							      </el-table-column>
								   <el-table-column
							      	align="center"
							        prop="parentEvaluateTime"
							        label="家长评价">
									<template slot-scope="scope">
							        	<span>{{scope.row.parentEvaluateTime||'未评价'}}</span>				           
							    	</template>
							      </el-table-column>
							      <el-table-column	
							        align="center"
							        label="操作">
							        <template slot-scope="scope">
							        	<template >
							        		<el-button type="text" v-if="hasApi('updateAttendence')" @click="editorAttendence(scope.row,'edite')">编辑</el-button >	
							        	</template>
							        	<el-button type="text" @click="editorAttendence(scope.row,'query')" >查看</el-button >	
							        </template>
							        
							      </el-table-column>
							    </el-table>
							  </template>
		   	    </div>
		   	   
		   	    <div class="pagePanel" style="padding:.3rem 0 0 0;">
		   	    	<el-pagination
				   	   	  class="page"	   	   	  
					      @current-change="curChange"	
					      @size-change="pageSizeChange"
					      :current-page="pageObj.currpage"
					      :page-size="pageObj.pagesize"		      
					      layout="total, sizes, prev, pager, next, jumper"
					      :total="pageObj.totalnum">
			    	</el-pagination>
		   	    </div>
				   	   
		   	   </div>
		   </el-row>
	
		    <!--新建考勤记录-->
		    <createAttendenceRecord></createAttendenceRecord>
		    <!--编辑考勤记录-->
		    <editorAttenceRecord ref="editorAttenceRecord" :Record="attendenceRecord"></editorAttenceRecord>
		    <!--加载面板-->
		    <loading ref="loading"></loading>
	   </div>
	</div>
	
</template>

<script>
	import {mapState,mapGetters,mapActions} from 'vuex'; //先要引入
	import createAttendenceRecord from './common/createAttendenceRecord'
	import editorAttenceRecord from './common/editorAttenceRecord'
	import loading from '../common/loading'
	let vm;
	export default{
		components: {
		  	createAttendenceRecord,
		  	editorAttenceRecord,
		  	loading
		  },
		data(){
			return{
				tableData:Array(10).fill({
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }),
				loadingObj:null,//加载面板对象
				attendenceRecord:null,
				classnametext:'',//班级
				selectState:'',//签到状态
				searchText:'',//搜索关键字
				classlist:[],//班级列表
				attendenceState:[],//考勤状态
				attendenceList:[],//考勤列表
				pageObj:{
					pagesize:10,
					totalnum:0,
					currpage:1,
				},				
				startTime:'',
				endTime:'',
				headControls:{
					payee:{
						createUserNameList:[],
						data:[],
						select:''
					},
					param:'',
					timeselect:{
						radio:'今日',
						pre_radio:'今日',
						selfTime:[new Date(), new Date()]
					}
				}
			}
		},
		methods:{
			initData(){
				 //班级初始化
			    api.getclassalllist({campusId:vm.$store.state.campusId}).then(function(data){
			      
			        if(data.result=='操作成功'){
			          let classlist = data.list;
			          vm.classlist = classlist.map(function(row){
			          	
			            return {name:row.className,value:row.classId}
			            
			          });
			        }
			    });
				
				this.searchData();
			},
			 //校区改变
			campusChange : function(campusId) {
				vm.searchData(1);
			},
			/**
			 * 获取列表
			 */
			searchData(index){
			
				if(index){
					this.pageObj.currpage=1;
				}
				
				let paras={					
							currPage:this.pageObj.currpage,
							pageSize:this.pageObj.pagesize,
							classId:this.classnametext||"",
							signinMode:this.selectState,
							keyName:this.searchText,
							startTime:this.startTime,
							endTime:this.endTime,
							campusId:vm.$store.state.campusId
						  };//设置请求校区学员列表参数
				// console.log(paras)
				//this.loadingObj.initLoading("努力加载中...");
				api.getAttendenceList(paras).then(function(data){
					// console.log(data.list);
					if(data.result=="操作成功"){
						vm.attendenceList=[];
						vm.pageObj.totalnum=data.totalCount;
						vm.attendenceList=data.list;
						for(let i=0;i<vm.attendenceList.length;i++){
							vm.attendenceList[i].courseStatusName=tool.getDictNameByValue(vm.attendenceList[i].courseStatus,'course_status');
							vm.attendenceList[i].signinModeName=tool.getDictNameByValue(vm.attendenceList[i].signinMode,'signin_mode');
							// debugger
							// let times = vm.startClassTime(vm.attendenceList[i]);
							// vm.attendenceList[i].startClassTime = times;
							
						}
					//vm.loadingObj.closeLoading();
					}
					
				}).catch(function(data){
					//vm.loadingObj.closeLoading();
				})
			},
			/**时间切换 */
			timeselectchange(d){
				let $datetime = $(".datetime");
				
				$datetime.eq(d-1).addClass("datetimeActive").siblings().removeClass("datetimeActive")
				
				if(d===4){//自定义					
					this.$refs.selfTime.focus();				
					return;
				}
				this.headControls.timeselect.selfTime=[];
				let timeobj;
				
				timeobj=tool.getTimeObjByType(d);			
				this.startTime=timeobj.startTime;
				this.endTime=timeobj.endTime;
				vm.searchData(1);
			},
			/**自定义时间 */
			updateSelfTime(d){
				
			
				this.startTime=d[0];
				this.endTime=d[1];
				console.log(this.startTime)
				vm.searchData(1);
			},
			/**
			 * 上课时间
			 */
			startClassTime(obj){
				if(!obj.classSigninFormEntity)return '';
				let start = obj.classSigninFormEntity.startTime||"";
				let end = obj.classSigninFormEntity.endTime||"";
				let coursename = obj.classSigninFormEntity.courseName||"";
				let orderBy = obj.classSigninFormEntity.orderBy||"";
				
				let startHM = start.split(' ');
				let endHM = end.split(' ');				
				return coursename+"第"+orderBy+"次课"+"\n"+startHM[0]+" "+startHM[1]+"-"+endHM[1];
			},
			/**
			 * 新增考勤记录
			 */
			addAttendence(){
				
				this.$store.dispatch('createAttendenceRecord/getClassList',vm.$store.state.campusId);	
				
			},
			/**
			 * 编辑考勤记录
			 */
			editorAttendence(row,type){	
				
				if(row.courseType==2){
					row.startTime = row.startTime.split(" ")[0];
				}
			    this.attendenceRecord={
					type:type,
			    	//classSigninFormEntity:row.classSigninFormEntity,			    
			    	varsigninMode:row.signinMode,
			    	signinMode:row.signinMode,
			    	consumeHour:row.consumeHour,
			    	signinTime:row.signinTime,
			    	classSigninId:row.classSigninId,
			    	classSyllabusId:row.classSyllabusId,
			    	studentId:row.studentId,
			    	classId:row.classId,
			    	realName:row.realName,
			    	courseName:row.courseName,
			    	className:row.className,
			    	orderBy:row.orderBy,
			    	startTime:row.startTime,
			    	endTime:row.endTime,
			    	teacherUserName:row.teacherUserName,
			    	classHour:row.classHour,
			    	courseStatus:row.courseStatus,
					classNo:row.classNo,
					courseType:row.courseType
			    	
			    }
			    
				this.$refs.editorAttenceRecord.updateAppraise(row);
				
				this.$store.dispatch('editorAttenceRecord/showeditorRecordPanel');	 
			},

			/**
			 * 分页请求
			 */
			curChange(val){
				this.pageObj.currpage=val;
				//alert(val)
				this.searchData();
			},
			pageSizeChange(val){
				this.pageObj.pagesize = val;
				this.searchData(1);
			},
			/**
			 * 班级改变
			 */
			changeClass(val){
				this.searchData(1);
			},
			/**
			 * 考勤状态改变
			 */
			changeAttendState(val){
				//console.log(val)
				this.searchData(1);
			}
		},
		mounted(){
			vm=this;
			//考勤状态数据字典
			this.attendenceState=tool.getDictNameByValue(-100,'signin_mode');//获取课程状态数据字典列表

			this.initData();
		}
	}
</script>

<style lang="scss">
	@import "@/style/module/utils.scss";
	/*.el-picker-panel{
		left: 12.6rem!important;
	}*/
	.studentAttendanceContainer{
		padding-top: 0.2rem;
		display: flex;   
    	flex-wrap: wrap;
		.content2{
			margin: 0 auto;
		    min-width: 15.6rem;
		    width: 15.6rem;
		.modelname{
				width:100%;
				height: .6rem;
				font-size: $modelTitleFontSize;
				color: #141414;
				line-height: .6rem;
				font-family: "microsoft yahei" ;
				font-weight:  bold;
		    }
		 .btnClass{
		       float: left;
		       margin-left: .1rem;
		       height: 0.36rem;
		       font-weight: bold;
		       box-shadow: 0 0 0.2rem 0 rgba(56,133,248,0.22);
		       width:1.52rem;
		       border-radius:.1rem;		    
		       font-size: 0.16rem;
		       background: #3885F8;
		       text-align: center;
		       line-height: 0.36rem;
		       color: #FFFFFF;
		       cursor: pointer;
		}
		.btnClass:hover{
			background: rgba(56,133,248,0.8);

		}
		.attenceList{
			width:inherit;
			max-height: 100rem;
			padding:0 .35rem .25rem .35rem;
			border: 1px solid #dcdfe6;
			background: #FFFFFF;
		    border-radius: .1rem;
		    -webkit-box-shadow: 0 2px 38px 0 #3885f81f, 0 0 6px 0 #3885f81f;
		    box-shadow: 0 2px 38px 0 #3885f81f, 0 0 6px 0 #3885f81f;

		}
		.timeselect{
			width:3rem;
			height: 0.36rem;
			float: right;
		
			.datetime{
				width: 0.7375rem;
				height: inherit;			
				float: left;
				border-right: 1px solid #DCDFE6;
				border-top: 1px solid #DCDFE6;
				border-bottom: 1px solid #DCDFE6;
				text-align: center;
				line-height: 0.36rem;
				font-size: 0.14rem;	
				cursor: pointer;			
			}
			.datetimeActive{
				color:#3885f8;;
			}
			.datetime:nth-child(1){
				border-left: 1px solid #DCDFE6;
				border-top-left-radius: 0.1rem;
				border-bottom-left-radius: 0.1rem;
			}
			.datetime:nth-child(4){				
				border-top-right-radius: 0.1rem;
				border-bottom-right-radius: 0.1rem;
			}
			
		}
		.headDatePicker{
					right: -2.95rem;
					width: 0.85rem !important;
					height: 0.39rem;
					pointer-events: none;
					opacity: 0;
				}
		}
	}
</style>